<div class="content">
  <div>
    <h2 class="subject">{{ assetType }}{{ 'WordSep' | translate }}{{ 'connect info' | translate }}</h2>
    <table>
      <tr *ngFor="let item of infoItems">
        <td class="title">{{ item.label | async }}</td>
        <td
          #tooltip="matTooltip"
          (cbOnSuccess)="onCopySuccess($event)"
          (mouseenter)="onHoverClipRef($event)"
          [cbContent]="item.value"
          [matTooltip]="hoverClipTip"
          class="text-td"
          matTooltipPosition="right"
          ngxClipboard
        >
          <span (click)="showPassword($event)" *ngIf="item.name === 'password'" class="show-password">
            <span style="vertical-align: middle">
              {{ passwordShow }}
            </span>
            <i class="fa fa-eye"></i>
          </span>
          <span *ngIf="item.name !== 'password' && item.name !== 'set_reusable'">
            {{ item.value }}
          </span>
          <span *ngIf="item.name == 'set_reusable' && canReuse" class="reusable-button">
            <mat-slide-toggle
              (change)="setReusable($event)"
              [(ngModel)]="token.is_reusable"
            >
              {{ "Re-use for a long time after opening" | translate }}
            </mat-slide-toggle>
          </span>
          <span class="btn">
            <i class="fa fa-clone icon"></i>
          </span>
        </td>
      </tr>
    </table>
  </div>
  <div *ngFor="let cmd of commands">
    <h2 class="subject">
      {{ cmd.title }}
    </h2>
    <div class="command">
      <pre>$ {{ cmd.safeValue }}</pre>

      <span #tooltip="matTooltip"
            (click)="startClient(cmd)"
            *ngIf="cmd.callClient && showClient"
            [matTooltip]="'Run it by client' | translate"
            class="start btn"
      >
        <i class="fa fa-caret-square-o-right icon"></i>
      </span>
      <span
        #tooltip="matTooltip"
        (cbOnSuccess)="onCopySuccess($event)"
        (mouseenter)="onHoverClipRef($event)"
        [cbContent]="cmd.value"
        [matTooltip]="hoverClipTip"
        class="btn"
        ngxClipboard
      >
        <i class="fa fa-clone icon"></i>
      </span>
    </div>
    <div *ngIf="cmd.helpText" class="help-block">
      {{ cmd.helpText }}
    </div>
  </div>
</div>
